<template>
    <view class="banner-com" :style="[box_style]" v-if="info.list && info.list.length > 0">
        <swiper class="screen-swiper square-dot" :style="[banner_style]" :indicator-dots="info.dot == 1" :circular="true" @change="onSwiperChange"
		 :autoplay="true" interval="5000" duration="500">
			<swiper-item v-for="(item,index) in info.list" :key="index" @click.stop="onSwiperClick(item)">
				<image class="swiper-image" :src="$imgUrl + item.img" mode="scaleToFill" :style="[border_radius_style]"  />
				<!-- <video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video> -->
			</swiper-item>
		</swiper>

        <!-- <image class="bg" v-if="bg" :src="bg" mode="widthFix"></image> -->
        <slot></slot>
    </view>
</template>

<script setup>

// 常规轮播组件
const { proxy } = getCurrentInstance()

const props = defineProps({
    info: {
        type: [Object],
        default: {}
    }
})
const { info } = toRefs(props)

const data = reactive({
    curr: 0
})
const { curr } = toRefs(data)

onMounted(() => {

})

const box_style = computed(() => {
    let style = {
        'height': `${props.info.height}rpx`,
        'padding': `0 ${props.info.padding}rpx`
    }
    return style
})

const banner_style = computed(() => {
    let style = {
        'height': `${props.info.height}rpx`,
    }
    return style
})

const border_radius_style = computed(() => {
    let style = { 'border-radius': `${props.info.border_radius}rpx` }
    return style
})
const emit = defineEmits(['changeSwiper'])

function onSwiperChange(e) {
    data.curr = e.detail.current
    emit('changeSwiper', data.curr)
}

function onSwiperClick(item) {
    let u = item.url || item.link
    proxy.$go(u)
}

</script>

<style lang="scss" scoped>
.banner-com {
    width: 100%;
    position: relative;
    margin-top: -2rpx;
}

.bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

.screen-swiper {
    width: 100%;
    position: relative;
    z-index: 2;
    min-height: 0;
    .swiper-item {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }

    .swiper-image {
        width: 100%;
        height: 100%;
    }
}
</style>
